<template>
  <div>
    <el-form ref="form" :rules="rules" :model="postMessage" label-width="103px" class="demo-ruleForm">
      <el-form-item label="请假人:"> {{ fullname }} </el-form-item>
      <el-form-item label="请假人电话:" prop="phone">
        <el-input v-model="postMessage.phone" size="small" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="请假类型:" prop="leaveTypeId">
        <el-select v-model="postMessage.leaveTypeId" placeholder="请选择请假类型" size="small">
          <el-option v-for="item in leavetype" :value="item.id" :label="item.leaveName" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假时间:" prop="startTime">
        <el-date-picker
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          size="small"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请假事由：" prop="description">
        <el-input
          type="textarea"
          maxlength="50"
          placeholder="请限制字数在50个以内"
          v-model="postMessage.description"
          show-word-limit
          resize="none"
          :rows="5"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addapplication">提 交</el-button>
        <el-button type="primary" @click="resetForm">清 空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from '@/api/api'
export default {
  props: {
    leavetype: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('该项不能为空！'))
      } else {
        if (value !== '') {
          callback()
        }
      }
    }
    return {
      value: '',
      option: [],
      fullname: '',
      postMessage: {
        description: '',
        endTime: '',
        leaveTypeId: '',
        phone: '',
        startTime: '',
      },
      rules: {
        phone: [{ required: true, validator: validatePass, trigger: 'blur' }],
        startTime: [{ required: true, validator: validatePass, trigger: 'blur' }],
        description: [{ required: true, validator: validatePass, trigger: 'change' }],
        leaveTypeId: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  methods: {
    addapplication() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          api.addapplication(this.postMessage).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
              })
            }
          })
          this.value = ''
          this.$refs['form'].resetFields()
          this.$emit('changeMsg')
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.value = ''
      this.$refs['form'].resetFields()
    },
    getDate(date) {
      this.value = date
      this.postMessage.startTime = this.value[0]
      this.postMessage.endTime = this.value[1]
    },
  },
  created() {
    this.fullname = localStorage.getItem('fullName')
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-form {
  width: 75%;
  margin: 10px auto;
  .el-form-item__label {
    text-align: justify;
  }
}
</style>
